<template>
	<view class="shop-list">
		<view class="shop-title f-color">
			<view class="shop-item" v-for="(item,index) in shoplist.data" :key="index" @tap="changTap(index)">
				<view :class="shoplist.currentindex == index?'f-active-color':''" style="margin-left: 50rpx;">
					{{item.name}}</view>
				<view class="shop-icon">
					<view class="iconfont icon-shangjiantou up" :class="item.status == 1?'f-active-color':''"></view>
					<view class="iconfont icon-xiajiantou down" :class="item.status == 2?'f-active-color':''"></view>
				</view>
			</view>
		</view>
		<Lines></Lines>
		<!-- 商品列表模块 -->
		<view class="module" v-for="(item,index) in dataList" :key="index">
			<view class="shop-module">
				<image class="shop-img" :src="item.imgUrl" mode=""></image>
				<view class="content f-color">
					<view class="shop-name">{{item.name}}</view>
					<view class="shop-price">
						<view class="price">
							<text class="pprice">￥{{item.pprice}}</text>
							<text class="oprice">￥{{item.oprice}}</text>
						</view>
						<view class="sale">销量：{{item.sale}}份</view>
					</view>
				</view>
			</view>
			<lines></lines>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import Lines from "@/components/common/Lines.vue"
	import noData from '../my_shop_store/noData.vue'
	export default {
		props: {
			keyword: String,
		},
		components: {
			Lines,
			noData
		},
		data() {
			return {
				shoplist: {
					currentindex: 0,
					data: [
						// 1:价格升序，2:价格降序
						{
							name: "销售",
							status: 1,
							key: 'sale'
						},
						{
							name: "价格",
							status: 0,
							key: 'pprice'
						},
					]
				},
				dataList: [],
			}
		},
		computed: {
			// 用作排序时的参数 key : value  将其当作参数传给后端
			orderBy() {
				let obj = this.shoplist.data[this.shoplist.currentindex];
				let val = obj.status == "1" ? "asc" : "desc";
				return {
					[obj.key]: val
				}
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			// 请求搜索数据
			getData() {
				$http.request({
					url: "/goods/search",
					data: {
						name: this.keyword,
						...this.orderBy
					}
				}).then((res) => {
					this.dataList = res
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
			},
			changTap(index) {
				// 点击排序---->重新请求数据
				this.getData()
				// 索引值
				let idx = this.shoplist.currentindex
				// 具体哪个对象
				let item = this.shoplist.data[idx]
				if (idx == index) {
					return item.status = item.status === 1 ? 2 : 1;
				}
				let newItem = this.shoplist.data[index];
				item.status = 0;
				this.shoplist.currentindex = index;
				newItem.status = 1;
			}
		}
	}
</script>

<style scoped>
	.shop-title {
		display: flex;
	}

	.shop-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}

	.shop-icon {
		position: relative;
		margin-left: 10rpx;
	}

	.iconfont {
		width: 16rpx;
		height: 8rpx;
		position: absolute;
		left: 0;
	}

	.up {
		top: -30rpx;
	}

	.down {
		top: -12px;
	}

	.shop-module {
		width: 100%;
		height: 180rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-img {
		width: 500rpx;
		height: 180rpx;
	}

	.content {
		width: 100%;
		height: 100%;
		padding: 30rpx 0 60rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop-name {
		font-size: 26rpx;
	}

	.shop-price {
		display: flex;
		justify-content: space-between;
	}

	.sale {
		font-size: 26rpx;
		margin-right: 60rpx;
	}

	.pprice {
		font-size: 30rpx;
		color: red;
	}

	.oprice {
		text-decoration: line-through;
	}
</style>